<template>
    <div style="margin-left: auto;">
        <h1>销售出库</h1>
    </div>

    <div class="app-container">
        <!-- 按钮 -->
        <el-card>
            <el-button @click="orderPrint">打印</el-button>
        </el-card>
    </div>
    <!-- 申请表单数据 -->
    <div id="printTest">
    </div>
    <hr>
    <el-scrollbar style="height: 320px;color: dimgray">
        <div class="scrollbar-flex-content">
            <p class="scrollbar-demo-item">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="单据编码：" style="width: 308px">
                        <el-input v-model="form.documentNumber" disabled="true" />
                    </el-form-item>
                    <el-form-item label="单据日期：" style="width: 308px">
                        <el-date-picker v-model="form.documentDate" type="date" disabled="true" />
                    </el-form-item>
                    <el-form-item label="单据状态：" style="width: 308px">
                        <el-select v-model="form.documentStatus" disabled="true">
                            <el-option label="开立" value="开立" />
                            <el-option label="审核" value="审核" />
                            <el-option label="返回" value="返回" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单据类型：" style="width: 308px">
                        <el-select v-model="form.documentType" disabled="true">
                            <el-option label="出库单" value="出库单" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="form" class="demo-form-inline">

                    <el-form-item label="业务类型：" style="width: 308px">
                        <el-select v-model="form.businessType" disabled="true">
                            <el-option label="销售订单" value="销售订单" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务状态：" style="width: 308px">
                        <el-select v-model="form.businessStatus" disabled="true">
                            <el-option label="正常" value="正常" />
                            <el-option label="挂机" value="挂机" />
                            <el-option label="手工关闭" value="手工关闭" />
                            <el-option label="系统关闭" value="系统关闭" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务部门：" style="width: 308px">
                        <el-select v-model="form.businessUnit" disabled="true">
                            <el-option label="总经办" value="1" />
                            <el-option label="市场部" value="2" />
                            <el-option label="采购部" value="3" />
                            <el-option label="销售部" value="4" />
                            <el-option label="生产运营中心" value="5" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务人员：" style="width: 308px">
                        <el-select v-model="form.businessPersonnel" disabled="true">
                            <el-option label="赵多和" value="赵多和" />
                            <el-option label="姜楠" value="姜楠" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="操作员：" style="width: 308px">
                        <el-input v-model="form.operatorId" disabled="true" />
                    </el-form-item>
                    <el-form-item label="期间" style="width: 308px">
                        <el-date-picker v-model="form.period" type="date" disabled="true" />
                    </el-form-item>
                    <el-form-item label="仓库" style="width: 308px">
                        <el-select v-model="form.warehouseId" disabled="true">
                            <el-option label="成品仓" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户名称：" style="width: 308px">
                        <el-input v-model="form.customerProfileName" disabled="true" />
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="发货单号" style="width: 308px">
                        <el-input v-model="form.invoiceNumber" disabled="true" />
                    </el-form-item>
                    <el-form-item label="发货类型" style="width: 308px">
                        <el-input v-model="form.shippingType" disabled="true" />
                    </el-form-item>

                    <el-form-item label="备注信息" style="width: 308px">
                        <el-input v-model="form.noteInformation" disabled="true" />
                    </el-form-item>
                </el-form>

            </p>
        </div>
    </el-scrollbar>
    <table style="border-collapse:collapse">
        <tr>
            <td>出单编号</td>
            <td>物料编码</td>
            <td>物料名称</td>
            <td>型号规格</td>
            <td>主计量</td>
            <td>出库数量</td>
            <td>批号</td>
            <td>备注</td>
        </tr>
        <tr v-for="(ruleForm, index) in loge.healthArray">
            <td>
                {{ ruleForm.documentNumber }}
            </td>
            <td>
                {{ ruleForm.itemBianma }}
            </td>
            <td>
                {{ ruleForm.materialName }}
            </td>
            <td>
                {{ ruleForm.typeSpecification }}
                <br>
            </td>
            <td>
                {{ ruleForm.documentType }}
            </td>
            <td>
                {{ ruleForm.outboundQuantity }}

            </td>
            <td>
                {{ ruleForm.lotNumber }}

            </td>
            <td>
                {{ ruleForm.remark }}

            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
const route = useRoute()
const cpiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;//5227
const form = reactive({
    "documentNumber": "",
    "documentDate": "",
    "documentStatus": "",
    "documentType": "",
    "businessType": "",
    "businessStatus": "",
    "businessUnit": 0,
    "businessPersonnel": "",
    "period": "",
    "warehouseId": 0,
    "invoiceNumber": "",
    "shippingType": "",
    "modeDelivery": "",
    "customerProfileName": "",
    "noteInformation": "",
    "operatorId": "",
    "itemBianma": "",
    "materialName": "",
    "typeSpecification": "",
    "outboundQuantity": 0,
    "lotNumber": "",
    "remark": " ",
    "auditDate": ""
})
const numbers = ref(0);
const loge = reactive({
    healthArray: <any>[
        reactive({
            sellOutMaterialsId: numbers.value + 1,
            documentNumber: "手工单据",
            itemBianma: "",
            materialName: "",
            typeSpecification: "",
            documentType: "",
            outboundQuantity: 0,
            lotNumber: "",
            remark: "",
            serialNumber: "",
        })
    ]
});
let purchaseReturnOrderArray: any = {};
const GetIntail = () => {
    axios.get(cpiurls + '/api/OutOfStock/SerachOutOfStockBackCommand', {
        params: {
            documentNumber: route.query.documentNumber,
        }
    }).then((res) => {
        purchaseReturnOrderArray = res.data.data
        console.log(purchaseReturnOrderArray)
        form.documentNumber = res.data.data.documentNumber
        form.documentDate = res.data.data.documentDate
        form.documentStatus = res.data.data.documentStatus
        form.documentType = res.data.data.documentType
        form.businessType = res.data.data.businessType
        form.businessStatus = res.data.data.businessStatus
        form.modeDelivery = res.data.data.modeDelivery
        form.customerProfileName = res.data.data.customerProfileName
        form.noteInformation = res.data.data.noteInformation
        form.itemBianma = res.data.data.itemBianma
        form.materialName = res.data.data.materialName
        form.typeSpecification = res.data.data.typeSpecification
        form.remark = res.data.data.remark
        form.auditDate = res.data.data.auditDate
        loge.healthArray = res.data.data.outOfStockWarehouseDTOs

    })
}
import { hiPrintPlugin } from 'vue-plugin-hiprint'
hiPrintPlugin.disAutoConnect()
// hiPrint.init();

import mb from './ms.json'

function orderPrint() {
    // 获取当前时间并格式化为年月日时分秒
    const currentDate = new Date();
    const datas = `${currentDate.getFullYear()}-${currentDate.getMonth() + 1}-${currentDate.getDate()} ${currentDate.getHours()}:${currentDate.getMinutes()}:${currentDate.getSeconds()}`;

    console.log(datas); // 输出类似于 "2024-12-26 21:12:34" 的字符串
    let printData = purchaseReturnOrderArray;
    printData.datas = datas;
    console.log(123, printData);
    let hiprintTemplate = new hiprint.PrintTemplate({ template: mb });
    // 打印
    hiprintTemplate.print(printData);
}
onMounted(() => {
    GetIntail()
})
///asdsadasdasdasdas
</script>
<style scoped>
.scrollbar-flex-content {
    display: flex;
}

.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1800px;
    height: 300px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
}
</style>
<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

/* 设置第一行的 td 顶部边框加粗并设置为红色 */
table tr:first-child td {
    border-top: 1px solid #ccc;
    /* 设置顶部边框为3px宽度的红色 */
    padding: 10px;
    text-align: center;
}

/* 设置 td 的样式 */

table td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 14px;
    height: 60px;
    width: 150px;
    white-space: nowrap;
    /* 防止内容换行 */
}

/* 可选：为 table 添加样式 */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}


.table-container {
    max-width: 100%;
    overflow-x: auto;
    /* 启用水平滚动 */
    margin: 20px 0;
    /* 设置容器的外边距 */
}
</style>